<template>
	<div class="normal-input-wrapper">
		<el-form-item :label="label" :required="required" :prop="prop" :label-width="lableWidth + 'px'" :error="error">
			<!-- <el-input :value="value" :disabled="showDetail" :placeholder="placeholder" :maxlength="maxlength" @input="updateValue" :id="prop"> </el-input> -->
			<ZcoInput :value="value" :disabled="showDetail" :showDetail="showDetail" :placeholder="placeholder" :maxlength="maxlength" @input="updateValue" :id="prop" /> 
			<span class="add-icon" v-if="!showDetail && variableIcon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
		</el-form-item>
	</div>
</template>

<script>
import ZcoInput from '../components/TinymceInput.vue';
export default {
	components: {
		ZcoInput,
	},
	props: {
		label: {
			type: String,
			default: () => ''
		},
		value: {
			type: String,
			default: () => ''
		},
		prop: {
			type: String,
			default: () => ''
		},
		required: {
			type: Boolean,
			default: () => false
		},
		maxlength: {
			type: Number,
			default: () => 140
		},
		lableWidth: {
			type: Number,
			default: () => 120
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		placeholder: {
			type: String,
			default: () => ''
		},
		error: {
			type: String,
			default: () => ''
		},
		variableIcon: {
			type: Boolean,
			default: () => true
		}
	},

	methods: {
		updateValue(e) {
			this.$emit('input', this.prop, e);
		},
		onChange(e) {
			this.$emit('input', this.prop, e);
		},
		onAddVariable() {
			this.$emit('onAddVariable', this.prop);
		}
	}
};
</script>

<style lang="less" scoped>
label .el-input {
	width: calc(100% - 54px);
}
.normal-input-wrapper {
	/deep/.el-form-item__label {
		width: 123px !important;
	}
}
</style>
